<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>详情页</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/other.css">
    <script src="js/axios.min.js"></script>
    <script src="js/xq.js"></script>
    <style>
        img {
           display: block;
           border: none;
       }
       #zoomBox{
           position: relative;
           width: 300px;
           height: 500px;
           /* border: 1px solid#f00; */
           margin: 10px 0px;
       }
       #midArea,
       #midArea img {
           width: 400px;
           height: 400px;
           /* border: 1px solid#f00; */

       }

       #zoom {
           display: none;
           position: absolute;
           width: 200px;
           height: 200px;
           opacity: .5;
           cursor: move;
           background-color: yellow;
       }

       #slt img {
           display: block;
           width: 50px;
           height: 50px;
           float: left;
           /* margin: 12px; */
       }

       #bigBox {
           display: none;
           position: absolute;
           width: 400px;
           height: 400px;
           left: 610px;
           top: 100px;
           border: 1px solid#f00;
           overflow: hidden;

       }
       #bigBox img{
           position: absolute;
           width: 800px;
           height: 800px;
       }



   </style>

</head>

<body>
    <div id="xq_show">
        <div class="xq_show_left">
            <p></p>
            <div id="zoomBox">
                <div id="midArea">          
                    <p><img src="" class="zoomjm" ></p>
                    <div id="zoom"></div>
                </div>
                <div id="slt">
                    <img src="" class="zoomjm">
                    <img src="" class="zoomjm">
                    <img src="" class="zoomjm">
                    <img src="" class="zoomjm">
                    <img src="" class="zoomjm">
                </div>
        
        
            </div>
            <div id="bigBox">
                <img src="" alt="" class="zoomjm">
            </div>
          
        </div>
        <div class="xq_show_right">
            <p></p>
            <div class="xq_show_carshop">
                <div class="xq_show_carshop1">
                <b class="num">-</b>
                <input type="tex" value="1" class="xq_show_carshop2"></input>
               
                <b class="num">+</b>
                <span>加入购物车</span>                 
            </div>
            </div>
        </div>

    </div>
   
    <script>
     new Zoom();
    </script>

</body>

</html>